为什么要用环境变量

在项目中配置秘钥时，为避免将秘钥公开上传到代码仓库，可以使用 .env 文件存储秘钥，然后在 .gitignore 中添加 .env ，防止上传秘钥。

注意：这种方法只能防止查看工程文件的人看到秘钥，如果部署在GitHub Pages上，他人仍能在静态文件中找到秘钥。

.env文件的使用

VITE_apiKey001 = "***"
VITE_apiKey002 = "***"
VITE_apiKey003 = "***"

// 在 vite 项目中调用
const config = {
  apiKey001: import.meta.env.VITE_apiKey001,
  apiKey002: import.meta.env.VITE_apiKey002,
  apiKey003: import.meta.env.VITE_apiKey003,
};

GitHub Actions 和 Secrets 配置

设置 GitHub Token

1. 在GitHub账号设置中找到developer settings
2. 找到Tokens(classic)，选择generate new token
3. 选择classic，权限范围至少包括repo和workflow
4. 添加备注并复制token内容

在项目中配置Secret

1. 进入项目代码仓库的settings
2. 左侧菜单找到Secrets and Variables
3. 进入Actions页面，新增repository secrets
4. 给秘钥起名（通常为API_TOKEN_GITHUB）并粘贴token内容
5. 在workflows流程文件中使用 ${{ secrets.API_TOKEN_GITHUB }} 引用秘钥

在workflow中配置环境变量

项目文件无法直接访问workflow文件中的变量，需要创建项目文件可访问的环境变量。有三种方法：

1. 在env属性中明文写出秘钥（不推荐）

jobs:
  my_job:
    env:
      VITE_apiKey001: "***"
      VITE_apiKey002: "***"
      VITE_apiKey003: "***"

缺点：如果代码仓库是公开的，他人可以看到workflow文件内容，秘钥就不再安全。

2. 在env属性中逐个引用secrets（较麻烦）

jobs:
  my_job:
    env:
      VITE_apiKey001: ${{ secrets.VITE_apiKey001 }}
      VITE_apiKey002: ${{ secrets.VITE_apiKey002 }}
      VITE_apiKey003: ${{ secrets.VITE_apiKey003 }}

缺点：当变量数量较多时，配置工作量大。

3. 使用secrets注入多个环境变量到env（推荐）

1. 在代码仓库环境变量中新建一个secret变量，名称为ENV_FILE
2. 变量内容输入.env文件的全部内容
3. 在工作流程文件的steps中添加：

jobs:
  my_job:
    steps:
      - name: Create .env file
        run: echo "${{ secrets.ENV_FILE }}" > .env

这样会在workflow的部署环境下创建.env文件，后续步骤中工程文件就能访问到环境变量了。